<template>
    <!-- 视频监控-智能监控-监控分析 -->
    <div class="mainContent">
        <div class="infoBox" style="margin-bottom: 10px;">
            <div class="top">
                <div class="left">
                    <div class="title">
                        <h2>
                            <span class="bc"></span>
                            <span>日趋势分析</span>
                        </h2>
                    </div>
                </div>
                <div class="right">
                    <div class="time" >
                        <div class="arrow_left" @click="prevDayFn"><Icon type="md-arrow-dropleft" /></div>
                        <div class="time_center">
                            <DatePicker placement='bottom'  type="date" :options="options"  :editable='false' :clearable='false' placeholder="请选择日期" style="width: 100%" format="yyyy-MM-dd" v-model="day" @on-change="getDayAnaFn"></DatePicker>
                        </div>
                        <div class="arrow_right" @click="nextDayFn" v-show="!dayTimeFlag"><Icon type="md-arrow-dropright" /></div>
                        <div class="arrow_right" v-show="dayTimeFlag"><Icon type="md-arrow-dropright" style="color:#eee;cursor:not-allowed"/></div>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="left">
                    <div class="canvas_none" v-if="lineNameList.length==0">
                        <img src="../../assets/images/common/canvas_none1.png" />
                    </div>
                    <div id="dayLineCanvas"  :style="{ height: '100%',}"></div>
                </div>
                <div class="right">
                    <div class="right_l">
                        <div id="dayPieCanvas" :style="{ height: '100%',}"></div>
                    </div>
                    <vue-seamless-scroll class="right_r"  :style="{'height':circleList.length > 4 ? '2rem' : 'auto'}" :data="circleList" :class-option="classOption">
                        <ul class="list">
                            <li v-for="(item,index) in circleList" :key="index">
                                <span class="radius" :style="{'background':colors[index]}"></span>
                                <span class="name">
                                    <Tooltip  transfer :content="item.name" placement="top-start"  max-width='200'>
                                        <div class="p" style="width:0.7rem;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;cursor: pointer;">
                                            {{item.name}}
                                        </div>
                                    </Tooltip>
                                </span>
                                <span class="sub" v-if="total>0">{{item.value+'次'}}</span>
                                <span class="sub" v-if="total>0">{{((item.value/total)*100).toFixed(2) + '%'}}</span>
                            </li>
                        </ul>
                    </vue-seamless-scroll>
                </div>
            </div>
        </div>
        <div class="infoBox">
                <div class="top">
                <div class="left">
                    <div class="title">
                        <h2>
                            <span class="bc"></span>
                            <span>月趋势分析</span>
                        </h2>
                    </div>
                </div>
                <div class="right">
                    <div class="time" >
                        <div class="arrow_left" @click="prevMonthFn"><Icon type="md-arrow-dropleft" /></div>
                        <div class="time_center">
                            <DatePicker placement='bottom'  type="month" :options="options"  :editable='false' :clearable='false' placeholder="请选择日期" style="width: 100%" format="yyyy-MM" v-model="month" @on-change="getMonthAnaFn"></DatePicker>
                        </div>
                        <div class="arrow_right" @click="nextMonthFn" v-show="!monthTimeFlag"><Icon type="md-arrow-dropright" /></div>
                        <div class="arrow_right" v-show="monthTimeFlag"><Icon type="md-arrow-dropright" style="color:#eee;cursor:not-allowed"/></div>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="left">
                    <div class="canvas_none" v-if="monthLineNameList.length==0">
                        <img src="../../assets/images/common/canvas_none1.png" />
                    </div>
                    <div id="monthLineCanvas"  :style="{ height: '100%',}"></div>
                </div>
                <div class="right">
                    <div class="right_l">
                    <div id="monthPieCanvas" :style="{ height: '100%',}"></div>
                    </div>
                    <vue-seamless-scroll class="right_r"  :style="{'height':monthCircleList.length > 4 ? '2rem' : 'auto'}" :data="monthCircleList" :class-option="classOption">
                        <ul class="list">
                            <li v-for="(item,index) in monthCircleList" :key="index">
                                <span class="radius" :style="{'background':colors[index]}"></span>
                                <span class="name">
                                    <Tooltip  transfer :content="item.name" placement="top-start"  max-width='200'>
                                        <div class="p" style="width:0.7rem;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;cursor: pointer;">
                                            {{item.name}}
                                        </div>
                                    </Tooltip>
                                </span>
                                <span class="sub" v-if="monthTotal>0">{{item.value+'次'}}</span>
                                <span class="sub" v-if="monthTotal>0">{{((item.value/monthTotal)*100).toFixed(2) + '%'}}</span>
                            </li>
                        </ul>
                    </vue-seamless-scroll>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {getFimAnalysisByHour ,getFimAnalysisByDate } from "@/api/api.js";
import {initYMD , initMD , initYM , getPreMonth , getNextMonth} from "@/sever/utils.js";
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
    components: { vueSeamlessScroll},
    data() {
        return {
            classOption:{
                step: 0.5,
            },
            options: {
                disabledDate(date) {
                    return date > Date.now();
                }
            },
            day:new Date(),
            maxDate:new Date(),
            month:new Date(),
            deptId: "",
            total: "",
            circleList: [],
            lineCountList: [],
            lineNameList: [],
            legendList: [],
            monthLegendList: [],
            monthTotal: "",
            circleCount: "",
            monthCircleList: [],
            monthLineCountList: [],
            monthLineNameList: [],
            colors: [
                "#FA5C90 ",
                "#46D9FF ",
                "#4990FE ",
                "#856DFE ",
                "#FFC880 ",
                "#29b6f6 ",
                "#8bc34a",
                "#fbc02d",
                "#b3e5fc",
                "#ef5350",
                "#4dd0e1",
                "#304ffe",
                "#ff4081",
                "#82b1ff",
                "#6a1b9a",
                "#f57f17",
                "#b71c1c",
                "#a5d6a7",
                "#ffab91",
                "#880e4f",
                "#f8bbd0"
            ],
            dayTimeFlag:true,
            monthTimeFlag:true,
        };
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.day = initYMD(this.day);
                this.maxDate = this.day;
                this.month =  initYM(this.day);
                this.getList();
                this.getMonthList();

            }
        }
    },
    methods: {
        prevDayFn() {
            this.dayTimeFlag = false;
            let day = new Date(this.day);
            day.setTime(day.getTime()-24*60*60*1000);
            this.day = day;
            this.getList();

        },
        prevMonthFn(){
            this.monthTimeFlag = false;
            this.month = initYMD(this.month);
            this.month = getPreMonth(this.month);
            this.getMonthList();
        },
        nextDayFn() {
            let day = new Date(this.day);
            day.setTime(day.getTime()+24*60*60*1000);
            this.day = day;
            this.getList();
            if(initYMD(this.maxDate) == initYMD(this.day)){
                this.dayTimeFlag = true;
            }
        },
        nextMonthFn() {
            this.month = initYMD(this.month);
            this.month = getNextMonth(this.month);
            this.getMonthList();
            if(initYMD(this.maxDate).substring(0,7) == initYM(this.month)){
                this.monthTimeFlag = true;
            }
        },
        getDayAnaFn(index) {
            this.day = index;
            if(initYMD(this.maxDate) == initYMD(this.day)){
                this.dayTimeFlag = true;
            }else{
                this.dayTimeFlag = false;
            }
            this.getList();
        },
        getMonthAnaFn(index) {
            this.month = index;
            if(initYMD(this.maxDate).substring(0,7) == initYM(this.month)){
                this.monthTimeFlag = true;
            }else{
                this.monthTimeFlag = false;
            }
            this.getMonthList();
        },
        //当天报警
        getList() {
            this.circleList = [];
            this.lineCountList = [];
            this.lineNameList = [];
            this.legendList = [];
            this.total = 0;
            let parmas = {
                deptId: this.deptId,
                date: initYMD(this.day)
            };
            getFimAnalysisByHour(parmas)
                .then(res => {
                    if (res.code == 200) {
                        if(res.data.fimWarnStatic){
                            let total = 0;
                            let fimWarnStaticList = res.data.fimWarnStatic;
                            fimWarnStaticList.forEach((v , i) => {
                                total += v.count;
                                let obj = {
                                    name: v.name,
                                    value: v.count,
                                };
                                this.circleList.push(obj);
                            });
                            this.total = total;
                            this.circleList = this.circleList.filter(v => v.value > 0 );
                            this.circleList.forEach((v , i) =>{
                                v.itemStyle = {
                                    normal: {
                                        color: this.colors[i],
                                    },
                                }
                            });
                            if(this.total == 0){
                                this.circleList.push({
                                    name :"暂无数据",
                                    value : 0,
                                    itemStyle: {
                                        normal: {
                                            color: this.colors[0],
                                        },
                                    },
                                })
                            }
                            this.dayPieCanvasFn();
                        }
                        if(res.data.dataList.length > 0 ){
                            let a = {name: '',smooth: true , type: 'line',data: []};
                            let b = {name: '',smooth: true , type: 'line',data: []};
                            let c = {name: '',smooth: true , type: 'line',data: []};
                            let d = {name: '',smooth: true , type: 'line',data: []};
                            let e = {name: '',smooth: true , type: 'line',data: []};
                            let f = {name: '',smooth: true , type: 'line',data: []};
                            let g = {name: '',smooth: true , type: 'line',data: []};
                            let h = {name: '',smooth: true , type: 'line',data: []};
                            let i = {name: '',smooth: true , type: 'line',data: []};
                            let j = {name: '',smooth: true , type: 'line',data: []};
                            res.data.dataList.forEach(item => {
                                item.fimWarnStatic.forEach(val => {
                                    if(val.algCheckType == 10){
                                        a.name = val.name;
                                        a.data.push(val.count);
                                    }
                                    if(val.algCheckType == 20){
                                        b.name = val.name;
                                        b.data.push(val.count);
                                    }
                                    if(val.algCheckType == 30){
                                        c.name = val.name;
                                        c.data.push(val.count);
                                    }
                                    if(val.algCheckType == 40){
                                        d.name = val.name;
                                        d.data.push(val.count);
                                    }
                                    if(val.algCheckType == 50){
                                        e.name = val.name;
                                        e.data.push(val.count);
                                    }
                                    if(val.algCheckType == 60){
                                        f.name = val.name;
                                        f.data.push(val.count);
                                    }
                                    if(val.algCheckType == 70){
                                        g.name = val.name;
                                        g.data.push(val.count);
                                    }
                                    if(val.algCheckType == 80){
                                        h.name = val.name;
                                        h.data.push(val.count);
                                    }
                                    if(val.algCheckType == 90){
                                        i.name = val.name;
                                        i.data.push(val.count);
                                    }
                                    if(val.algCheckType == 100){
                                        j.name = val.name;
                                        j.data.push(val.count);
                                    }
                                    if(val.algCheckType == 120){
                                        j.name = val.name;
                                        j.data.push(val.count);
                                    }
                                })
                                this.lineNameList.push(item.time);
                            });
                            this.lineCountList = [a , b , c , d , e , f , g , h , i , j];
                            this.lineCountList.forEach(v=>{
                                v.itemStyle = {
                                    normal: {
                                        color: this.colors[i],
                                        lineStyle: {
                                            // 系列级个性化折线样式
                                            width: 2,
                                            type: 'solid',
                                            color: this.colors[i]
                                        }
                                    },
                                }
                            })
                            this.lineCountList = this.lineCountList.filter( v => {
                                v['count'] = 0;
                                v.data.forEach(value=>{
                                    v.count += value;
                                })
                                if(v.count > 0){
                                    return v
                                }
                            })
                            if(this.lineCountList.length == 0){
                                this.lineNameList = [];
                            }
                            this.lineCountList.forEach(v=>{
                                this.legendList.push(v.name)
                            })
                            this.$echarts.init(document.getElementById("dayLineCanvas")).clear();
                            this.dayLineCanvasFn();
                        }
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //月度报警
        getMonthList() {
            this.monthCircleList = [];
            this.monthLineCountList = [];
            this.monthLineNameList = [];
            this.monthLegendList = [];
            this.monthTotal = 0;
            let parmas = {
                deptId: this.deptId,
                month: initYM(this.month),
            };
            getFimAnalysisByDate(parmas)
                .then(res => {
                    if (res.code == 200) {
                        if(res.data.fimWarnStatic){
                            let monthTotal = 0;
                            let fimWarnStaticList = res.data.fimWarnStatic;
                            fimWarnStaticList.forEach((v , i) => {
                                monthTotal += v.count;
                                let obj = {
                                    name: v.name,
                                    value: v.count,
                                };
                                this.monthCircleList.push(obj);
                            });
                            this.monthTotal = monthTotal;
                            this.monthCircleList = this.monthCircleList.filter(v => v.value > 0 );
                            this.monthCircleList.forEach((v , i) =>{
                                v.itemStyle = {
                                    normal: {
                                        color: this.colors[i],
                                    },
                                }
                            });
                            if(this.monthTotal == 0){
                                this.monthCircleList.push({
                                    name :"暂无数据",
                                    value : 0,
                                    itemStyle: {
                                        normal: {
                                            color: this.colors[0],
                                        },
                                    },
                                })
                            }
                            this.monthPieCanvasFn();
                        }
                        if(res.data.dataList.length > 0 ){
                            let a = {name: '',smooth: true , type: 'line',data: []};
                            let b = {name: '',smooth: true , type: 'line',data: []};
                            let c = {name: '',smooth: true , type: 'line',data: []};
                            let d = {name: '',smooth: true , type: 'line',data: []};
                            let e = {name: '',smooth: true , type: 'line',data: []};
                            let f = {name: '',smooth: true , type: 'line',data: []};
                            let g = {name: '',smooth: true , type: 'line',data: []};
                            let h = {name: '',smooth: true , type: 'line',data: []};
                            let i = {name: '',smooth: true , type: 'line',data: []};
                            let j = {name: '',smooth: true , type: 'line',data: []};
                            res.data.dataList.forEach(item => {
                                item.fimWarnStatic.forEach(val => {
                                    if(val.algCheckType == 10){
                                        a.name = val.name;
                                        a.data.push(val.count);
                                    }
                                    if(val.algCheckType == 20){
                                        b.name = val.name;
                                        b.data.push(val.count);
                                    }
                                    if(val.algCheckType == 30){
                                        c.name = val.name;
                                        c.data.push(val.count);
                                    }
                                    if(val.algCheckType == 40){
                                        d.name = val.name;
                                        d.data.push(val.count);
                                    }
                                    if(val.algCheckType == 50){
                                        e.name = val.name;
                                        e.data.push(val.count);
                                    }
                                    if(val.algCheckType == 60){
                                        f.name = val.name;
                                        f.data.push(val.count);
                                    }
                                    if(val.algCheckType == 70){
                                        g.name = val.name;
                                        g.data.push(val.count);
                                    }
                                    if(val.algCheckType == 80){
                                        h.name = val.name;
                                        h.data.push(val.count);
                                    }
                                    if(val.algCheckType == 90){
                                        i.name = val.name;
                                        i.data.push(val.count);
                                    }
                                    if(val.algCheckType == 100){
                                        j.name = val.name;
                                        j.data.push(val.count);
                                    }
                                    if(val.algCheckType == 120){
                                        j.name = val.name;
                                        j.data.push(val.count);
                                    }
                                })
                                this.monthLineNameList.push(item.time);
                            });
                            this.monthLineCountList = [a , b , c , d , e , f , g , h , i , j];
                            this.monthLineCountList.forEach(v=>{
                                v.itemStyle = {
                                    normal: {
                                        color: this.colors[i],
                                        lineStyle: {
                                            // 系列级个性化折线样式
                                            width: 2,
                                            type: 'solid',
                                            color: this.colors[i]
                                        }
                                    },
                                }
                            });
                            this.monthLineCountList = this.monthLineCountList.filter( v => {
                                v['count'] = 0;
                                v.data.forEach(value=>{
                                    v.count += value;
                                })
                                if(v.count > 0){
                                    return v
                                }
                            });
                            if(this.monthLineCountList.length == 0){
                                this.monthLineNameList = [];
                            }
                            this.monthLineCountList.forEach(v=>{
                                this.monthLegendList.push(v.name)
                            })
                            this.$echarts.init(document.getElementById("monthLineCanvas")).clear();
                            this.monthLineCanvasFn();
                        }
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        dayLineCanvasFn() {
            let dayLineCanvas = this.$echarts.init(document.getElementById("dayLineCanvas"));
            dayLineCanvas.setOption({
                color: this.colors,
                tooltip: {
                    //触发类型：坐标轴触发
                    trigger: 'axis',
                    axisPointer: {
                        type: ""
                    },
                    backgroundColor:'rgba(255,255,255,0.8)',//通过设置rgba调节背景颜色与透明度
                    color:'black',
                    textStyle:{
                        color:'#303030',
                    },
                    extraCssText:'box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);'
                },
                legend: {
                    type: 'scroll',
                    left: "8%",
                    right: "8%",
                    x: "center",
                    top: 0,
                    data: this.legendList
                },
                grid: {
                    left: "4%",
                    right: "8%",
                    bottom: "2%",
                    containLabel: true
                },
                xAxis: {
                    data: this.lineNameList,
                    name: "时间",
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#BFBFBF",
                            type: 'dashed',
                        }
                    },
                    splitLine: {
                        //去除网格线
                        show: false,
                        lineStyle: {
                            type: 'dashed',
                            color:'#BFBFBF'
                        }
                    },
                },
                yAxis: {
                    show: true,
                    name: "次数",
                    offset: -8,
                    type: 'value',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: "#BFBFBF",
                        }
                    },
                    splitLine: {
                        //去除网格线
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color:'#BFBFBF'
                        }
                    }
                },
                series:this.lineCountList
            });
        },
        dayPieCanvasFn() {
            let dayPieCanvas = this.$echarts.init(document.getElementById("dayPieCanvas"));
            dayPieCanvas.setOption({
                tooltip: {
                        //触发类型：坐标轴触发
                        trigger: "item",
                        backgroundColor:'rgba(255,255,255,0.8)',//通过设置rgba调节背景颜色与透明度
                        color:'black',
                        textStyle:{
                            color:'#303030',
                        },
                        extraCssText:'box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);'
                    },
                color: this.colors,
                title: {
                    text: this.total,
                    left: "center",
                    top: "40%",
                    textStyle: {
                        color: "#434242",
                        fontSize: 24,
                        align: "center",
                    },
                },
                graphic: {
                    type: "text",
                    left: "center",
                    top: "55%",
                    style: {
                        text: "报警总数(次)",
                        textAlign: "center",
                        fill: "#333",
                        fontSize: 12,
                        fontWeight: 400,
                    },
                },
                series: [
                    {
                        name: "报警类型",
                        type: "pie",
                        radius: ["40%", "50%"],
                        data: this.circleList,
                    },
                ]
            });
        },
        monthLineCanvasFn() {
            let monthLineCanvas = this.$echarts.init(document.getElementById("monthLineCanvas"));
            monthLineCanvas.setOption({
                color: this.colors,
                tooltip: {
                    //触发类型：坐标轴触发
                    trigger: "axis",
                    axisPointer: {
                        type: ""
                    },
                    backgroundColor:'rgba(255,255,255,0.8)',//通过设置rgba调节背景颜色与透明度
                    color:'black',
                    textStyle:{
                        color:'#303030',
                    },
                    extraCssText:'box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);'
                },
                legend: {
                    type: 'scroll',
                    left: "8%",
                    right: "8%",
                    x: "center",
                    top: 0,
                    data: this.monthLegendList
                },
                grid: {
                    left: "4%",
                    right: "8%",
                    bottom: "2%",
                    containLabel: true
                },
                xAxis: {
                    data: this.monthLineNameList,
                    name: "时间",
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#BFBFBF",
                            type: 'dashed',
                        }
                    },
                    splitLine: {
                        //去除网格线
                        show: false,
                        lineStyle: {
                            type: 'dashed',
                            color:'#BFBFBF'
                        }
                    },
                },
                yAxis: {
                    show: true,
                    name: "次数",
                    offset: -8,
                    type: 'value',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: "#BFBFBF",
                        }
                    },
                    splitLine: {
                        //去除网格线
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color:'#BFBFBF'
                        }
                    }
                },
                series:this.monthLineCountList
            });
        },
        monthPieCanvasFn() {
            let monthPieCanvas = this.$echarts.init(document.getElementById("monthPieCanvas"));
            monthPieCanvas.setOption({
                tooltip: {
                        //触发类型：坐标轴触发
                        trigger: "item",
                        backgroundColor:'rgba(255,255,255,0.8)',//通过设置rgba调节背景颜色与透明度
                        color:'black',
                        textStyle:{
                            color:'#303030',
                        },
                        extraCssText:'box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);'
                    },
                color: this.colors,
                title: {
                    text: this.monthTotal,
                    left: "center",
                    top: "40%",
                    textStyle: {
                        color: "#434242",
                        fontSize: 24,
                        align: "center",
                    },
                },
                graphic: {
                    type: "text",
                    left: "center",
                    top: "55%",
                    style: {
                        text: "报警总数(次)",
                        textAlign: "center",
                        fill: "#333",
                        fontSize: 12,
                        fontWeight: 400,
                    },
                },
                series: [
                    {
                        name: "报警类型",
                        type: "pie",
                        radius: ["40%", "50%"],
                        data: this.monthCircleList,
                    },
                ]
            });
        },
    },
    mounted() {
        this.day = initYMD(this.day);
        this.maxDate = this.day;
        this.month =  initYM(this.day);
        this.deptId = this.$store.state.porjectObject.deptId;
        this.getList();
        this.getMonthList();
    }
};
</script>
<style lang="less" scoped>
.mainContent{
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .infoBox{
        flex: 1;
        width: 100%;
        background-color: #fff;
        .top{
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 20px;
            box-sizing: border-box;
            .left{
                width: 50%;
                .title{
                    h2{
                        width: 98%;
                        height: 30px;
                        line-height: 30px;
                        margin: 0 auto;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        padding-left: 17px;
                        box-sizing: border-box;
                        .bc{
                            width: 5px;
                            height: 15px;
                            background: var(--themeColor);
                            margin-right: 12px;
                        }
                    }
                }
            }
            .right{
                    margin-right: 1%;
                    .time{
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        position: relative;
                        .time_center{
                            .ivu-input{
                                border-color: var(--themeColor);
                                border-right-color: none;
                                width: 120px;
                                text-align: center;
                                padding: 0;
                                color: var(--themeColor);
                                height: 30px;
                                &:active{
                                    outline: none;
                                }
                                &:focus{
                                    border-color : none;
                                    box-shadow : none;
                                }
                            }
                            .ivu-icon-ios-calendar-outline{
                                display: none;
                            }
                        }
                        .arrow_left,
                        .arrow_right{
                            width: 30px;
                            height: 30px;
                            text-align: center;
                            line-height:  30px;
                            font-size: 24px;
                            cursor: pointer;
                            color: var(--themeColor);
                        }
                    }
            }
        }
        .bottom{
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            height: 300px;
            .left{
                position: relative;
                width: 60%;
                height: 100%;
                .canvas_none{
                    position: absolute;
                    top: 25%;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 80%;
                    height: 180px;
                    img{
                        display: block;
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .right{
                width: 40%;
                height: 260px;
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .right_l{
                    width: 55%;
                    height: 100%;
                }
                .right_r{
                    position: relative;
                    width: 45%;
                    height: 200px;
                    overflow: hidden;
                    .list{
                            position: relative;
                            width: 100%;
                            height: auto;
                            list-style: none;
                            overflow-y: scroll;
                            margin-left: 10px;
                            &::-webkit-scrollbar {
                                width: 8px;
                            }
                            li{
                                width: 100%;
                                display: flex;
                                justify-content: flex-start;
                                align-items: center;
                                font-size: 12px;
                                font-family: Microsoft YaHei;
                                color: #181818;
                                margin-bottom: 10px;
                                .radius{
                                    width: 20px;
                                    height: 10px;
                                    border-radius: 10px;
                                    background: #98D87D;
                                    margin-right: 10px;
                                }
                                .name{
                                    margin-right: 10px;
                                    width: 80px;
                                    color: #181818;
                                    .ivu-tooltip{
                                        width: 80px;
                                    }
                                }
                                .sub{
                                    margin-right: 10px;
                                    width: 80px;
                                    color: #58595A;
                                    &:last-of-type{
                                        margin-right: 0;
                                    }
                                }
                            }
                    }
                }
                p {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    margin-right: 5px;
                    span {
                        font-size: 12px;
                    }
                    span:first-child {
                        height: 10px;
                        width: 20px;
                        border-radius: 5px;
                        margin-right: 2px;
                    }
                }
            }
        }
    }
}
</style>
